import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:stacked/stacked.dart';
import 'package:vista/features/community/views/community_view.dart';
import 'package:vista/features/home/views/home_view.dart';
import 'package:vista/features/main/viewmodels/navigation_hub_viewmodel.dart';
import 'package:vista/features/message/views/message_view.dart';
import 'package:vista/features/profile/views/profile_view.dart';

/// 导航中心
/// 主页面，包含底部导航栏和四个子页面
class NavigationHub extends StatelessWidget {
  const NavigationHub({super.key});

  // 底部导航栏配置
  static final List<NavigationItem> _navigationItems = [
    NavigationItem(
      icon: 'assets/images/home.png',
      selectedIcon: 'assets/images/home-select.png',
    ),
    NavigationItem(
      icon: 'assets/images/community.png',
      selectedIcon: 'assets/images/community-select.png',
    ),
    NavigationItem(
      icon: 'assets/images/message.png',
      selectedIcon: 'assets/images/message-select.png',
    ),
    NavigationItem(
      icon: 'assets/images/profile.png',
      selectedIcon: 'assets/images/profile-select.png',
    ),
  ];

  // 子页面列表
  static final List<Widget> _pages = [
    const HomeView(),
    const CommunityView(),
    const MessageView(),
    const ProfileView(),
  ];

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder<NavigationHubViewModel>.reactive(
      viewModelBuilder: () => NavigationHubViewModel(),
      builder: (context, model, child) {
        return Scaffold(
          body: Stack(
            children: [
              // 页面内容，可以延伸到全屏
              IndexedStack(index: model.currentIndex, children: _pages),
              // 固定在底部的导航栏
              Positioned(
                left: 0,
                right: 0,
                bottom: 0,
                child: _buildBottomNavigationBar(context, model),
              ),
            ],
          ),
        );
      },
    );
  }

  /// 构建底部导航栏
  Widget _buildBottomNavigationBar(
    BuildContext context,
    NavigationHubViewModel model,
  ) {
    return Container(
      height: 60.h + MediaQuery.of(context).padding.bottom,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, -2),
          ),
        ],
        border: Border(
          top: BorderSide(color: Colors.black.withOpacity(0.1), width: 1),
        ),
      ),
      child: SafeArea(
        top: false,
        child: Padding(
          padding: EdgeInsets.only(top: 8.h, bottom: 4.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children:
                _navigationItems.asMap().entries.map((entry) {
                  final index = entry.key;
                  final item = entry.value;
                  final isSelected = model.currentIndex == index;

                  return Expanded(
                    child: _buildNavigationItem(
                      context,
                      model,
                      item,
                      index,
                      isSelected,
                    ),
                  );
                }).toList(),
          ),
        ),
      ),
    );
  }

  /// 构建导航项
  Widget _buildNavigationItem(
    BuildContext context,
    NavigationHubViewModel model,
    NavigationItem item,
    int index,
    bool isSelected,
  ) {
    return GestureDetector(
      onTap: () => model.switchToPage(index),
      behavior: HitTestBehavior.opaque,
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        child: Center(
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            curve: Curves.easeInOut,
            width: isSelected ? 48.w : 32.w,
            height: isSelected ? 48.w : 32.w,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color:
                  isSelected
                      ? const Color(0xFFFFA680).withOpacity(0.15)
                      : Colors.transparent,
            ),
            child: AnimatedSwitcher(
              duration: const Duration(milliseconds: 200),
              child: Image.asset(
                isSelected ? item.selectedIcon : item.icon,
                key: ValueKey(isSelected ? 'selected' : 'normal'),
                width: 24.w,
                height: 24.w,
                fit: BoxFit.contain,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

/// 导航项数据模型
class NavigationItem {
  final String icon;
  final String selectedIcon;

  const NavigationItem({required this.icon, required this.selectedIcon});
}
